<template>
  <div class="forgetPwd-container">
    <div class="main-container">
      <div class="main-item">
        <div class="label">
          <span class="iconfont iconshoujihao"></span>
        </div>
        <div class="value">
          <input type="text" placeholder="请输入手机号" v-model="form.username"/>
        </div>
      </div>
      <div class="main-item">
        <div class="label">
          <span class="iconfont iconverify-fill"></span>
        </div>
        <div class="value code">
          <input type="text" placeholder="请输入验证码" v-model="form.smscode"/>
          <div class="code-btn" @click="sendCode">{{ timer ? count + '秒' : '发送验证码' }}</div>
        </div>
      </div>
      <div class="main-item">
        <div class="label">
          <span class="iconfont iconlock"></span>
        </div>
        <div class="value">
          <input type="password" placeholder="请设置密码（不少于6位数）" v-model="form.userpwd"/>
        </div>
      </div>
    </div>
    <div class="btn-container" @click="submit">确认</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null,
      count: 60,
      form: {
        username: '',
        smscode: '',
        userpwd: ''
      }
    };
  },
  methods: {
    async sendCode () {
      if (this.timer) return
      if (!this.form.username) {
        this.$toast('请输入手机号')
        return
      }
      const result = await this.$fetchGet('/home/login/smscode', {
        telephone: this.form.username,
        type: 1,
        check: 1
      })
      if (!result.success) {
        this.$toast(result.msg)
        return
      }
      this.$toast('短信发送成功')
      this.timer = setInterval(() => {
        this.count --
        if (this.count <= 0) {
          clearInterval(this.timer)
          this.timer = null
          this.count = 60
        }
      }, 1000)
    },
    async submit () {
      if (!this.form.username) {
        this.$toast('请输入手机号')
        return
      }
      if (!this.form.smscode) {
        this.$toast('请输入短信验证码')
        return
      }
      if (!this.form.userpwd) {
        this.$toast('请输入密码')
        return
      }
      const result = await this.$fetchPost('/home/login/findpwd', this.form)
      if (!result.success) {
        this.$toast(result.msg)
        return
      }
      const userInfo = await this.$fetchGet('/home/member/index')
      if (!userInfo.success) {
        this.$toast(userInfo.msg)
        return
      }
      this.$store.commit('changeUserData', userInfo.data.member)
      this.$store.commit('changeCartList')
      this.$router.push('/my')
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
};
</script>

<style lang="scss">
.forgetPwd-container {
  .main-container {
    width: 100vw;
    padding: 0 40px;
    background: #ffffff;
    box-shadow: 0 0 10px #888;
    margin-top: 5vh;
    .main-item {
      display: flex;
      line-height: 100px;
      padding: 0 20px;
      border-bottom: 1px solid #e3e3e3;
      margin: 2px 0;
      .label {
        font-size: 25px;
        font-weight: bold;
        color: #505050;
        margin-right: 50px;
        .iconfont {
          font-size: 40px;
        }
      }
      .value {
        flex: 1;
        font-size: 25px;
        color: #505050;
        .van-cell {
          line-height: 100px;
          padding: 0;
          .van-field__control {
            font-size: 25px;
          }
        }
        input {
          width: 100%;
          border: none;
        }
        &.code {
          display: flex;
          .code-btn {
            border: none;
            background-color: #fff;
            font-size: 25px;
            cursor: pointer;
            line-height: 70px;
            margin-top: 15px;
            height: 70px;
            width: 250px;
            text-align: center;
            box-sizing: border-box;
            background-image: linear-gradient(#fff, #fff),
              linear-gradient(to bottom right, #FC8F04, #F71C19);
            font-weight: 300;
            // color: #fff;
            padding: 2px;
            border-radius: 10px;
            background-clip: content-box, padding-box;
            transition: filter 0.5s ease;
          }
        }
      }
      &:last-child {
        border-bottom: none;
      }
    }
  }
  .tip {
    text-align: center;
    margin-top: 20px;
    color: #D8D8D8;
    span {
      color: #FE3C3C;
    }
  }
  .btn-container {
    margin-top: 50px;
    width: 80vw;
    margin-left: 10vw;
    text-align: center;
    line-height: 100px;
    background: linear-gradient(to right, #fc8f04, #f71c19);
    border-radius: 50px;
    font-size: 35px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 10px;
  }
}
</style>